.widget-sync-screen-container {
	position: absolute;
	left: 0;
	top: 0;
	background-color: #fff;
	box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.18);
	.widget-sync-screen-header {
		width: 100%;
		height: 20px;
		background: linear-gradient(180deg, #e1e2e1 0%, #d1d1d1 100%);
		border-radius: 4px 0;
		display: flex;
		align-items: center;
		span {
			cursor: pointer;
			margin: 0 4px;
			display: inline-block;
			width: 10px;
			height: 10px;
			border-radius: 50%;
		}
	}
	.icon-error {
		background-color: #f8646a;
	}
	.icon-warning {
		background-color: orange;
	}
	.icon-success {
		background-color: #3bcea6;
	}
}
.sync-screen-footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40px;
	background: #f7f7f7;
	box-shadow: 2px 1px 6px 0px rgba(0, 0, 0, 0.15);
}
.widget-sync-container-box {
	width: 100%;
	height: 100%;
	color: #fff;
	background-color: #000;
}
.large-scale {
	position: absolute;
	right: 4px;
	top: 4px;

	cursor: pointer;
}
.large-sync-screen {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 100;
	background-color: #fff;
	box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.18);
}
.sync-screen-tips {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
	width: 100%;
	padding: 14px 0;
	text-align: center;
	background-color: #252b48;
	color: #fff;
	z-index: 1000;
	.contents {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.widget-icon {
		cursor: pointer;
	}

	.button {
		display: inline-block;
		width: 32px;
		height: 32px;
		cursor: pointer;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.button-interactable {
		background-image: url('../../../assets/img/remote-control.png');
	}
	.button-uninteractable {
		background-image: url('../../../assets/img/remote-control-disable.png');

	}
}

.cover-wrapper {
	position: absolute;
    height: calc(100% - 60px);
    width: 100%;
    top: 60px;
    background: #dbdbdb;
    display: flex;
    justify-content: center;
    align-items: center;
	color: #020514;
	flex-direction: column;
}
/*!*********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/WhiteBoard/styles/index.less ***!
  \*********************************************************************************************************************************************************************/
* {
	margin: 0;
	padding: 0;
}

ul,
ol,
li {
	list-style: none;
}

.tools-wrapper {
	display: flex;
	background-color: #f7f7f7;
	justify-content: space-around;
}

.tools-wrapper-item {
	padding: 10px;
}

.tool-icon {
	display: inline-block;
	width: 24px;
	height: 100%;
}

.tool-pen {
	background: url()
		no-repeat center;
	background-size: contain;
}

.tool-remove {
	background: url()
		no-repeat center;
	background-size: contain;
}

.tool-line {
	background: url()
		no-repeat center;
	background-size: contain;
}

.tool-circle {
	background: url()
		no-repeat center;
	background-size: contain;
}

.tool-text {
	background: url()
		no-repeat center;
	background-size: contain;
}

.tool-rectangle {
	background: url()
		no-repeat center;
	background-size: contain;
}

.active {
	background: #d3e9e1;
}

.white-board-canvas-contaier {
	margin: 0 auto;
}

.whiteboard_wraper {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.iframe_wraper_container {
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}

.touch_image {
	position: absolute;
	width: 32px;
	height: 32px;
	opacity: 1;
}

.iframe_wraper_container iframe {
	border: none;
}

.screen_sync_container {
	width: 100%;
	height: 100%;
}

.customer_wraper {
	width: 100%;
	height: 100%;
}

.agent_wraper {
	width: 100%;
	height: 100%;
}

.iframe_wraper {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.widget-sync-container-box {
	.tools-list-wrapper {
		height: 40px;
		display: block;
        width: 100%;
        position: absolute;
        bottom: 0;
        z-index: 1;

		.tools-wrapper {
			height: 40px;
			margin: 0;
		}

		.tools-wrapper-item {
			margin: 0;
		}

		.active {
			background: #d3e9e1;
		}
	}
}